<template>
    <el-dialog :visible.sync="dialogView" top="10rem" width="55rem" custom-class="verifyFiledBox">
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">指派</div>
        </div>
        <div class="contentBox">
            <div class="parts">
                <div class="leftHeader">
                    <div class="searchItems">
                        <p>姓名查询</p>
                        <input
                            class="tagInput"
                            v-model="searchClue"
                            placeholder="请输入姓名查询"
                            type="text"
                            size="small"
                            @keydown="searchByName"
                        />
                    </div>
                    <!-- <div class="searchItems">
                        <p>选择部门</p>
                        <el-cascader
                            style="width: 17rem;"
                            size="small"
                            :options="options"
                            @active-item-change="handleItemChange"
                            :props="locateProp"
                            @change="changeDep"
                            v-model="contactAddress"
                            placeholder="请选择部门"
                        />
                    </div> -->
                </div>
                <div class="listBox">
                    <div style="width: 20.5rem;height: 19rem;overflow-y: auto;">
                        <div 
                            class="staffsList" 
                            v-for="(item, index) in staffsList" 
                            :key="index"
                        >
                            <p>
                                {{item.userName}}
                            </p>
                            <div class="square" v-if="!choosenStatus(item)" @click="addStaff(item)"></div>
                            <img src="@/assets/img/icon_choose.png" v-else>
                        </div>
                    </div>
                </div>
            </div>
            <div class="parts">
                <div class="searchItems" style="width: 100%;">
                    <p>已选客服</p>
                    <p>已选<span>{{choosenList.length}}</span>人</p>
                </div>
                <div class="listBox">
                    <div style="width: 100%;height: 19rem;overflow-y: auto;">
                        <div 
                            class="staffsList" 
                            style="width: 100%;"
                            v-for="(item, index) in choosenList" 
                            :key="index"
                        >
                            <p>
                                {{item.userName}}
                            </p>
                            <img src="@/assets/img/icon_close.png" style="cursor:pointer;" @click="removeStaff(item)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btnBox">
            <div class="btn" @click="submit">确认</div>
            <div class="btn cancel" @click="closeBox">取消</div>
        </div>
    </el-dialog>
</template>
<script>
    import { getStaffInfo, doDistribute, findStaffByName } from '../axios.js'
    export default {
        data() {
            return { 
                dialogView: false,
                choosenReason: '',
                searchClue: '',
                // 客服列表
                staffsList: [],
                // 选中的客服
                choosenList: [],
                options: [
                    
                ],
                contactAddress: [],
                locateProp: {
                    value: 'key',
                    label: 'value',
                    children: 'childArr'
                }
            }
        },
        props: ['TableSelectData'],
        methods: {
            openBox() {
                this.dialogView = true;
                this.searchByName({keyCode: 13})
            },
            closeBox() {
                this.dialogView = false;
            },
            // 选定的回调
            changeDep(val) {
                Array.isArray(val) && val.length > 0 && getStaffInfo(val.length === 1 ? val[0] : val[1]).then(res => {
                    if(res.data.status === 200) {
                        this.staffsList = res.data.result
                    }
                })
            },
            // 选择了内容的回调
            handleItemChange(item) {
                let index;
                this.options.map((ele, ind) => {
                    ele.key == item && (index = ind)
                })
                getStaffInfo(item).then(res => {
                    if(res.data.status === 200) {
                        this.options[index].childArr = res.data.result
                    }
                })
            },
            choosenStatus(item) {
                let isChoosed = false;
                this.choosenList.forEach(ele => {
                    ele.id == item.id && (isChoosed = true)
                })
                return isChoosed;
            },
            // 通过名字查找
            searchByName(e) {
                if(e.keyCode === 13) {
                    findStaffByName(this.searchClue).then(res => {
                        if(res.data.status === 200) {
                            let arr = []
                            res.data.result.map(ele => {
                                arr = arr.concat(ele)
                            })
                            this.staffsList = arr
                        }
                    }).catch(err => {
                        console.log('err: ', err)
                    })
                }
            },
            // 添加客服
            addStaff(item) {
                let isChoosed = false;
                this.choosenList.forEach(ele => {
                    ele.id == item.id && (isChoosed = true)
                })
                !isChoosed && this.choosenList.push(item)
            },
            // 移除
            removeStaff(item) {
                this.choosenList.map((ele, ind) => {
                    ele.id == item.id && this.choosenList.splice(ind, 1)
                })
            },
            // 点击确定
            submit() {
                if(!this.choosenList.length) {
                    this.$message({
                        showClose: true,
                        message: '请选择客服',
                        type: 'warning'
                    });
                }else {
                    let arr = [], arr1 = [];
                    let effectiveSelectData = [];
                    this.TableSelectData.map(ele => {
                        ele.status === 1 && effectiveSelectData.push(ele)
                    })
                    
                    this.choosenList.map(item => {
                        console.log(item, 'item')
                        arr.push(item.sapUserId)
                    })
                    effectiveSelectData.map(ele => {
                        arr1.push(ele.id)
                    })
                    if(arr.length > arr1.length) {
                        this.$message({
                            message: '人数多于订单数',
                            type: 'warning'
                        })
                        return
                    }
                    let obj = {
                        assignIds: arr,
                        reservationIds: arr1
                    }
                    doDistribute(obj).then(res => {
                        if(res.data.status === 200) {
                            this.$message({
                                showClose: true,
                                message: '指派成功',
                                type: 'success'
                            });
                            this.closeBox();
                            this.$emit('refresh')
                        }else {
                            this.$message({
                                showClose: true,
                                message: '指派失败',
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                        console.log('err: ', err)
                    })
                }
            }
        },
        activated() {
            // getStaffInfo(0).then(res => {
            //     console.log('res: ', res)
            //     if(res.data.status === 200) {
            //         let temp = res.data.result;
            //         temp.forEach(ele => {
            //             ele.childArr = [];
            //         });
            //         this.options = temp
            //     }
            // })
        },
    }
</script>
<style scoped> 
    .contentBox{
        width: 94%;
        padding: 3%;
        min-width: 40rem;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .parts{
        width: 50%;
        height: 23rem;
    }
    .staffsList {
        width: 17rem;
        height: 3rem;
        font-size: 1.4rem;
        /* border-bottom: 1px solid #7E6B5A; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .title{
        width: 100%;
        height: 2.4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        /* border-bottom: 1px solid #7E6B5A; */
        justify-content: space-between;
    }
    .btnBox{
        width: 20rem;
        height: 3rem;
        margin: 0 auto;
        text-align: center;
    }
    .btn{
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        background: #7E6B5A;
        color: #FFF;
        cursor: pointer;
        margin: 0 8px;
    }
    .listBox{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .cancel{
        background: #222222;
    }
    .searchItems{
        width: 22.5rem;
        height: 4rem;
        display: flex;
        font-size: 1.4rem;
        align-items: center;
        justify-content: space-between;
    }
    .square{
        width: 1rem;
        height: 1rem;
        border: 1px solid #7E6B5A;
        border-radius: 0.1rem;
        cursor:pointer;
    }
    .tagInput{
        width: 17rem;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 2.8rem;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
    }
    .tagInput::placeholder{
        color: #C0C4CC;
    }
</style>